import 'package:favorcate/core/model/meal_model.dart';
import 'package:favorcate/ui/shared/extension/int_extension.dart';
import 'package:favorcate/ui/widgets/custom_list_view.dart';
import 'package:flutter/material.dart';

class ZSDetailContent extends StatelessWidget {
  final ZSMealModel _meal;

  const ZSDetailContent(this._meal, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          buildBannerImage(),
          buildMakeTitle(context, '制作材料'),
          buildMakeMaterial(context),
          buildMakeTitle(context, '制作步骤'),
          buildMakeStep(context),
        ],
      ),
    );
  }

  //1.横幅图片
  Widget buildBannerImage() {
    return Padding(
      padding: EdgeInsets.all(10.px),
      child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(20.px)),
        child: Image.network(
          _meal.imageUrl!,
          width: double.infinity,
          height: 250.px,
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  //2.制作材料
  Widget buildMakeMaterial(BuildContext context) {
    return buildMakeContent(
      context: context,
      child: CustomListView.builder(
          itemCount: _meal.ingredients!.length,
          itemBuilder: (ctx, index) {
            return Card(
                color: Theme.of(context).colorScheme.secondary,
                child: Padding(
                  padding: EdgeInsets.all(8.px),
                  child: Text(_meal.ingredients![index]),
                ));
          }),
    );
  }

  //3.制作步骤
  Widget buildMakeStep(BuildContext context) {
    return buildMakeContent(
      context: context,
      marginBottom: 40.px,
      child: CustomListView.separated(
          itemCount: _meal.steps!.length,
          itemBuilder: (ctx, index) {
            return ListTile(
              leading: CircleAvatar(child: Text('#${index + 1}')),
              title: Text(_meal.steps![index]),
            );
          }),
    );
  }

  //公共方法
  Widget buildMakeTitle(BuildContext context, String title) {
    return Container(
        padding: EdgeInsets.symmetric(vertical: 10.px),
        child: Text(title,
            style: Theme.of(context)
                .textTheme
                .headline2
                ?.copyWith(fontWeight: FontWeight.bold)));
  }

  Widget buildMakeContent(
      {required BuildContext context,
      required Widget child,
      double marginBottom = 0}) {
    return Container(
      margin: EdgeInsets.only(bottom: marginBottom),
      padding: EdgeInsets.all(8.px),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(8.px),
      ),
      width: MediaQuery.of(context).size.width - 30.px,
      child: child,
    );
  }
}
